<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
      @edit="handleUpdate"
    >

      <template slot="filter-content" />

      <template slot="data-columns">

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          align="center"
          label="联络方法"
          prop="contactType_dictText"
        />

        <el-table-column
          align="center"
          label="联系人"
          prop="contactId_dictText"
        />

        <el-table-column
          align="center"
          label="联系时间"
          prop="createTime"
        />

        <el-table-column
          align="center"
          label="客户经理"
          prop="createBy_dictText"
        />

        <el-table-column
          align="center"
          label="联系结果"
          prop="result_dictText"
        />

        <el-table-column
          align="center"
          label="备注信息"
          prop="remark"
        />

      </template>
    </data-table>

    <el-dialog title="管理联系人" :close-on-click-modal="false" :append-to-body="true" :visible.sync="dialogVisible" width="50%">

      <el-form ref="postForm" :model="postForm" label-position="left" :rules="rules" label-width="100px">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联络方式" prop="contactType">
              <dic-list-select v-model="postForm.contactType" dic-code="contact_type" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人" prop="contactId">
              <contacts-select v-model="postForm.contactId" :customer-id="postForm.customerId" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系结果" prop="result">
              <dic-list-select v-model="postForm.result" dic-code="contact_result" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注信息">
              <el-input v-model="postForm.remark" />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiSaveContactRecord, apiContactRecordDetail } from '@/api/customer/record'
import ContactsSelect from '@/views/admin/customer/components/ContactsSelect'

export default {
  name: 'CustomerContactRecord',
  directives: { permission },
  components: { ContactsSelect, DicListSelect, DataTable },
  props: {
    customerId: String
  },
  data() {
    return {
      rules: {
        contactType: [
          { required: true, message: '联络方式不能为空！' }
        ],
        contactId: [
          { required: true, message: '联系人必须选择！' }
        ],
        result: [
          { required: true, message: '联系结果必须选择！' }
        ]
      },
      dialogVisible: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      postForm: {
        customerId: ''
      },

      options: {

        add: {
          enable: true,
          permission: ''
        },
        edit: {
          enable: true,
          permission: ''
        },
        delete: {
          enable: true,
          permission: '',
          url: '/api/customer/contact/delete'
        },

        // 列表请求URL
        listUrl: '/api/customer/contact/paging'
      }
    }
  },

  watch: {
    customerId: {
      handler(val) {
        this.postForm.customerId = val
        this.listQuery.params.customerId = val
      }
    }
  },

  created() {
    this.postForm.customerId = this.customerId
    this.listQuery.params.customerId = this.customerId
  },

  methods: {

    handleAdd() {
      this.postForm = { customerId: this.customerId }
      this.dialogVisible = true
    },

    handleUpdate(id) {
      apiContactRecordDetail(id).then(res => {
        this.dialogVisible = true
        this.postForm = res.data
      })
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        apiSaveContactRecord(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '联系记录保存成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    }
  }
}
</script>
